import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import serviceApi from './../../service/api'
import './hot-service.scss'
import HotServiceSummary from './../hot-service-summary/hot-service-summary.tsx'

export class HotService extends Component {
  tabClick(url, id, e){
    this.setState({"servic_current_index":id})
    serviceApi.get(this, url, id)
  }

  remarkClick(menu_id, e){
      Taro.navigateTo({
      url: '/pages/detail/index?menu_id='+menu_id
    })
  }

  render() {
    const tabs = (this.props.hot_services || []).map((service, k) => {
    const { servic_current_index } = this.state
    return <View className={(servic_current_index == service.id || (!k && !servic_current_index)) ? 'round active inline' : 'round unactive inline'} onClick={this.tabClick.bind(this, 'menu/get_summary?menu_id='+service.id, service.id)} >
        {service.icon && <View className="rm-img">
          <Image src={service.icon} mode="widthFix" />
        </View>}
        <View className="titl"> 
        {service.name}
        </View>
      </View>
    })
    const { summary } = this.state.summary ? this.state : this.props
    return (
        <View>
          <ScrollView
            className='scrollview' 
            scrollX 
            scrollWithAnimation 
          >
          {tabs}
          </ScrollView>
         <View>
        <HotServiceSummary summary={summary} />
        </View>
        </View>
    )
  }
}